<template lang="pug">
    skin(@up="up",@down="down",@yes="yes",@back="back",@duringUp="up",@duringDown="down")
        div(class="flex-column")
            div(class="flex-column-item h3" v-for="(menu,index) in currentPageMenus")
                div(:class="{'selected-text': menu.id == activeId ? true: false}",class="flex-row")
                    div(class="flex-row-item")
                        span {{menu.name}}
                        span(v-if="!menu.isAction") :
                    div(class="flex-row-item",:style="{'text-align':'center',flex: menu.isAction ? 0 : 0.5 }")
                        span(v-if="tasking && index==2") {{still}}
                        span(v-else) {{menu.value ? menu.value.value : ''}}
                        span(v-if="!menu.isAction") {{menu.unit}}
        control-amount(v-model="active",:visible="amountVisible",ref="control")

</template>

<script>
import dayjs from "dayjs";

export default {
  data() {
    return {
      tasking: window.dose.squareWare.tasking,
      menus: [
        {
          name: "立即输注",
          id: 0,
          value: { name: 0, value: 0 },
          unit: "U",
          increment: 0.1,
          max: 20,
          min: 0
        },
        {
          name: "方波剂量",
          id: 1,
          value: {
            name: window.dose.squareWare.tasking
              ? window.dose.squareWare.amount
              : 4.9,
            value: window.dose.squareWare.tasking
              ? window.dose.squareWare.amount
              : 4.9
          },
          unit: "U",
          increment: 0.2,
          max: 20,
          min: 0
        },
        {
          name: "输注时间",
          id: 2,
          value: {
            name: window.dose.squareWare.tasking
              ? window.dose.squareWare.minutes
              : 60,
            value: window.dose.squareWare.tasking
              ? window.dose.squareWare.minutes
              : 60
          },
          unit: "分",
          increment: 30,
          max: 240,
          min: 0
        },
        {
          name: window.dose.squareWare.tasking
            ? "取消方波输注>>"
            : "开始双波输注>>",
          id: 3,
          isAction: true
        }
      ],
      activeId: 0,
      active: null,
      page: { maxResultCount: 4, skipCount: 0 },
      amountVisible: false
    };
  },
  computed: {
    currentPageMenus() {
      var start = this.page.skipCount;
      var end = this.page.skipCount + this.page.maxResultCount;
      return this.menus.slice(start, end);
    },
    still() {
      return dayjs().diff(dayjs(window.dose.squareWare.createAt), "minute");
    }
  },
  methods: {
    getActive(id) {
      return this.menus.find(menu => {
        return menu.id == id;
      });
    },
    up() {
      if (this.amountVisible) {
        this.$refs.control.up();
        return;
      } else {
        if (this.activeId == 0) {
          // this.page.skipCount = 3;
        } else if (this.activeId == 3) {
          this.page.skipCount = 0;
        }

        if (this.activeId == 0) {
          this.activeId = this.menus[this.menus.length - 1].id;
        } else {
          this.activeId = this.activeId - 1;
        }

        this.active = this.getActive(this.activeId);
      }
    },
    down() {
      if (this.amountVisible) {
        this.$refs.control.down();
        return;
      } else {
        if (this.activeId == 2) {
          // this.page.skipCount = 3;
        } else if (this.activeId == 5) {
          this.page.skipCount = 0;
        }

        if (this.activeId == this.menus[this.menus.length - 1].id) {
          this.activeId = 0;
        } else {
          this.activeId = this.activeId + 1;
        }
        this.active = this.getActive(this.activeId);
      }
    },

    back() {
      if (this.amountVisible) this.amountVisible = false;
      else this.$router.push("/menu");
    },
    yes() {
      if (this.active.isAction) {
        var isTasking = window.dose.squareWare.tasking;
        if (!isTasking) {
          window.dose.squareWare.createAt = new Date();
          window.dose.squareWare.amount = this.menus[1].value.value;
          window.dose.squareWare.minutes = this.menus[2].value.value;
          window.dose.records.push({
            date: dayjs(),
            amount: window.dose.squareWare.amount,
            type: "S"
          });
          window.dose.records.push({
            date: dayjs(),
            amount: this.menus[0].value.value,
            type: "D"
          });
        }
        window.dose.squareWare.tasking = !isTasking;
        if (isTasking) {
          this.$router.push("/");
        } else {
          this.$router.push("/large-dose/flusion");
        }
      } else if (window.dose.squareWare.tasking) {
        return;
      } else {
        this.amountVisible = !this.amountVisible;
      }
    }
  },
  created() {
    this.active = this.menus[0];
  }
};
</script>

<style lang="less">
</style>
